<template>
  <!-- 顶部导航 -->
  <tm-navbar color="orange" linear="right" linearDeep="accent" title="商品名称"></tm-navbar>
  <view v-if="!loading">
    <!-- 商品顶部轮播图 -->
    <tm-carousel autoplay :margin="[0]" :padding="[0]" :height="500" :list="ImageList"></tm-carousel>
    <tm-sheet color="orange" :margin="[0]" :padding="[10]" linear="right" _class="flex flex-row flex-start">
      <block v-if="productDetails.id">
        <tm-image :src="productDetails.imgUrl" :width="150" :height="150"></tm-image>
      </block>
      <!-- 秒杀商品 -->
      <block v-if="seckillSkuVo">
        <tm-sheet :margin="[20, 0]" :padding="[0]" :transprent="true" class="text-size-s">
          <text>
            秒杀价：
            <text style="color: #ff0000">￥{{ seckillSkuVo.seckillPrice }}</text>
            市场价：
            <text class="text-delete" style="color: #ff0000">￥{{ seckillSkuVo.marketPrice }}</text>
          </text>
          <text _class="pt-5">
            限购：{{ seckillSkuVo.seckillLimit }}件 销售： {{ seckillSkuVo.seckillSale }}件 库存：{{
              seckillSkuVo.seckillStock
            }}件
          </text>
          <view class="flex flex-row pt-5">
            <text>秒杀场次：{{ seckillSkuVo.timeName }}场</text>
            <view class="flex flex-row pl-10">
              <text>倒计时：</text>
              <tm-countdown
                format="HH:MM:SS"
                :autoStart="true"
                :time="calcSeckillSeconds(seckillSkuVo.endTime)"
              ></tm-countdown>
            </view>
          </view>
        </tm-sheet>
      </block>
      <!-- 普通商品 -->
      <block v-else>
        <tm-sheet :margin="[20, 0]" :padding="[0]" :transprent="true" class="text-size-s">
          <text>
            当前价格：
            <text class="text-weight-b" style="color: #ff0000">￥{{ productDetails.price }}</text>
          </text>
          <text>
            限购数量：{{ productDetails.perLimit }}件 销售：{{ productDetails.sale }}件 库存：{{ productDetails.stock }}
            件
          </text>
        </tm-sheet>
      </block>
    </tm-sheet>
    <!-- 商品详情 -->
    <tm-sheet :round="3" :margin="[34, 20]"><tm-text :label="productDetails.skuName"></tm-text></tm-sheet>
    <tm-sheet :round="3" :margin="[34, 10]">
      <block v-for="item in skuAttrValueList" :key="item.id">
        <tm-text>{{ item.attrName }}:{{ item.attrValue }}</tm-text>
      </block>
    </tm-sheet>
    <!-- 商品类型 -->
    <tm-sheet :round="3" :margin="[34, 10]" v-if="activityRuleList && activityRuleList.length > 0">
      <block v-for="item in activityRuleList" :key="item.id">
        <tm-text :label="item.ruleDesc"></tm-text>
      </block>
    </tm-sheet>
    <!-- 提货信息 -->
    <tm-sheet :round="3" :margin="[34, 10]">
      <tm-cell
        :margin="[0]"
        :padding="[0, 10]"
        :titleFontSize="30"
        title="售后无忧"
        rightText="支持保价・极速退款・7天无理由退货"
      ></tm-cell>
      <tm-cell
        :margin="[0]"
        :padding="[0, 10]"
        :titleFontSize="30"
        title="提货信息"
        rightText="现在下单，明天16:00可提货"
      ></tm-cell>
      <tm-cell
        :margin="[0]"
        :padding="[0, 10]"
        :titleFontSize="30"
        title="提货地址"
        :rightText="home?.leaderAddressVo?.detailAddress"
      ></tm-cell>
    </tm-sheet>

    <tm-sheet :round="3" :margin="[34, 10]">
      <block v-for="(item, index) in ImageList" :key="index">
        <tm-image :src="item.url" :width="630" :height="500"></tm-image>
      </block>
    </tm-sheet>
    <!-- 底部 -->
    <view class="flex flex-row white pl-20 pr-20 bottom bottom-detail">
      <view class="flex flex-col pa-20 flex-between" @click="gotoHome">
        <tm-sheet :padding="[0]" :margin="[0]"><tm-icon name="tmicon-md-home" :font-size="50"></tm-icon></tm-sheet>
        <tm-text>首页</tm-text>
      </view>
      <view class="flex flex-col pa-20 flex-center" @click="gotoCart">
        <tm-sheet :padding="[0]" :margin="[0]">
          <tm-badge :count="IndexStore.CartList.length" :maxCount="99" color="red" linear="top" :right="-20">
            <tm-icon name="tmicon-shopping-cart-fill" :font-size="50"></tm-icon>
          </tm-badge>
        </tm-sheet>
        <tm-text>购物车</tm-text>
      </view>
      <view class="flex flex-col pa-20 flex-center">
        <tm-badge
          :count="couponInfoList.length"
          :maxCount="99"
          color="red"
          linear="top"
          @click="openCouponInfoList"
          v-if="couponInfoList && couponInfoList.length > 0"
        >
          <tm-sheet :width="100" :height="50" :margin="[0]" :padding="[0]">
            <tm-icon name="tmicon-quan" :fontSize="60" color="green"></tm-icon>
          </tm-sheet>
        </tm-badge>
      </view>
      <view class="flex flex-col pa-20 flex-center">
        <AddToCart :sku-id="productDetails._id" :per-limit="productDetails.perLimit"></AddToCart>
      </view>
      <view class="flex flex-col pa-20 flex-center">
        <tm-button
          :margin="[0]"
          :shadow="0"
          size="small"
          label="立即购买"
          color="red"
          :round="10"
          @click="gotoCart"
        ></tm-button>
      </view>
    </view>
  </view>
  <view v-else>
    <view class="loading">
      <tm-spin :load="loading" tip="玩命加载中！" class="loading-content">
        <tm-sheet :margin="[0, 0]" :padding="[0, 0]"></tm-sheet>
      </tm-spin>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
import tmCarousel from '@/tmui/components/tm-carousel/tm-carousel.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmCountdown from '@/tmui/components/tm-countdown/tm-countdown.vue'
import tmBadge from '@/tmui/components/tm-badge/tm-badge.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmSpin from '@/tmui/components/tm-spin/tm-spin.vue'
import { useIndexStore } from '@/store/modules/IndexStore'
import http from '@/utils/request'
import type {
  HotSku,
  ImagesList,
  SeckillSkuVo,
  SkuAttrValueList,
  ActivityRuleList,
  CouponInfoList,
} from '@/types/index'
import dayjs from 'dayjs'
const productDetails = ref<HotSku>({})
const carouselImageList = ref<ImagesList[]>([])
const seckillSkuVo = ref<SeckillSkuVo>({})
const skuAttrValueList = ref<SkuAttrValueList[]>([])
const activityRuleList = ref<ActivityRuleList[]>([])
const couponInfoList = ref<CouponInfoList[]>([])
const loading = ref(true)
const IndexStore = useIndexStore()
const getList = async () => {
  await http.get(`/home/item/${productDetails.value.id}`).then((res) => {
    carouselImageList.value = res.data.skuInfoVo.carouselImageList
    seckillSkuVo.value = res.data.seckillSkuVo
    skuAttrValueList.value = res.data.skuInfoVo.skuAttrValueList
    activityRuleList.value = res.data.activityRuleList
    couponInfoList.value = res.data.couponInfoList
    loading.value = false
  })
}
const ImageList = computed(() => {
  return carouselImageList.value.map((ele) => {
    return { url: ele.imgUrl }
  })
})
onMounted(() => {
  productDetails.value = IndexStore.productDetails
  getList()
})
// 计算秒杀商品剩余时间
const calcSeckillSeconds = computed(() => {
  return (endTimeString: string) => {
    // endTimeString='2024-05-20 12:00:00'
    if (!endTimeString) return 0
    const now = dayjs()
    const endTime = dayjs(endTimeString)
    const seconds = endTime.diff(now, 'second') * 1000
    return seconds
  }
})
const gotoHome = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
// const getPerLimit = () => {
// 	if (seckillSkuVo.value) {
// 		return seckillSkuVo.value.seckillLimit
// 	}
// 	return productDetails.value.perLimit
// }
const gotoCart = () => {
  uni.switchTab({
    url: '/pages/cart/index',
  })
}
</script>

<style lang="less">
.bottom-detail {
  position: fixed;
  top: 1210rpx;
  width: 100%;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;

  .loading-content {
    height: 100rpx;
    width: 200rpx;
  }
}
</style>
